<script setup>
import { ref,onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter();
// import { onMounted, reactive, getCurrentInstance } from 'vue'
// import axios from '@/utils/axios'
// import { ElMessage } from 'element-plus'
// import { Plus, Delete } from '@element-plus/icons-vue'
// import { useRouter } from 'vue-router'

// const app = getCurrentInstance()
// const { goTop } = app.appContext.config.globalProperties
// const router = useRouter()
// const state = reactive({
//   loading: false,
//   tableData: [], // 数据列表
//   total: 0, // 总条数
//   currentPage: 1, // 当前页
//   pageSize: 10 // 分页大小
// })
// onMounted(() => {
//   getGoodList()
// })
// // 获取轮播图列表
// const getGoodList = () => {
//   state.loading = true
//   axios.get('/goods/list', {
//     params: {
//       pageNumber: state.currentPage,
//       pageSize: state.pageSize
//     }
//   }).then(res => {
//     state.tableData = res.list
//     state.total = res.totalCount
//     state.currentPage = res.currPage
//     state.loading = false
//     goTop && goTop()
//   })
// }
// const handleAdd = () => {
//   router.push({ path: '/add' })
// }
// const handleEdit = (id) => {
//   router.push({ path: '/add', query: { id } })
// }
// const changePage = (val) => {
//   state.currentPage = val
//   getGoodList()
// }
// const handleStatus = (id, status) => {
//   axios.put(`/goods/status/${status}`, {
//     ids: id ? [id] : []
//   }).then(() => {
//     ElMessage.success('修改成功')
//     getGoodList()
//   })
// }
const goodList = ref([]);

const getGoodList = ()=>{
  axios({
    url: "http://localhost:9090/good/getGoodList",
    method: 'GET'
  }).then(res=>{
    // console.log('getGoodList:',res);
    if (res.data.isSuccess == true) {
      goodList.value = res.data.data;
    }
    else {
      ElMessage({
        message: res.data.errorMsg,
        type: 'error',
      })
    }
  })
}
const handleEdit = (index,row)=> {
  console.log(index)

  router.push({
    path: '/addgood',
    query:{
      Good_id:goodList.value[index].Good_id,
      Good_name:goodList.value[index].Good_name,
      Good_brand:goodList.value[index].Good_brand,
      Good_type:goodList.value[index].Good_type,
      Good_desc:goodList.value[index].Good_desc,
      Good_memory:goodList.value[index].Good_memory,
      Good_color: goodList.value[index].Good_color,
      Good_image: goodList.value[index].Good_image,
      Good_price: goodList.value[index].Good_price,
      Good_discountPrice: goodList.value[index].Good_discountPrice
    }
  })
}
const handleDelete = (index) => {
  // console.log(data.tableData[index].id)
  // var id = goodList.value[index].Good_id;
  // console.log('id',id);

  axios({
    url:'http://124.71.66.63:9090/good/deleteGood',
    method: 'POST',
    data:{
      id:goodList.value[index].Good_id,
    },
    headers: { 'Content-Type':'application/x-www-form-urlencoded' }
  })
  .then(res => {
    if (res.data.isSuccess == true){
      ElMessage({
        message:res.data.data,
        type: 'success'
      })
      getGoodList()
    }
  })
}
onMounted(()=>{
  getGoodList();
})
</script>

<template>
    <el-card class="good-container">
      <el-table
        :data="goodList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="Good_id"
          label="商品编号"
        >
        </el-table-column>
        <el-table-column
          prop="Good_name"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="Good_brand"
          label="品牌"
        >
        </el-table-column>
        <el-table-column
          prop="Good_type"
          label="分类"
        >
        </el-table-column>
        <el-table-column
          prop="Good_desc"
          label="描述"
        >
        </el-table-column>
        <el-table-column
          prop="Good_memory"
          label="内存规格"
        >
        </el-table-column>
        <el-table-column
          prop="Good_color"
          label="颜色规格"
        >
        </el-table-column>
        <el-table-column
          prop="Good_image"
          label="商品主图"
        >
        </el-table-column>
        <el-table-column
          prop="Good_price"
          label="原价"
        >
        </el-table-column>
        <el-table-column
          prop="Good_discountPrice"
          label="出售价"
        >
        </el-table-column>

  
        <el-table-column
          label="操作"
          width="100"
        >
          <template #default="scope">
            <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.$index,scope.row)">修改</a>
            <a style="cursor: pointer; margin-right: 10px" @click="handleDelete(scope.$index,scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <!--总数超过一页，再展示分页器-->
      <!-- :total="state.total"
        :page-size="state.pageSize"
        :current-page="state.currentPage"
        @current-change="changePage" -->
      <el-pagination
        background
        layout="prev, pager, next"
      />
    </el-card>
  </template>
  
  <style scoped>
    .good-container {
      min-height: 100%;
    }
    .el-card.is-always-shadow {
      min-height: 100%!important;
    }
  </style>
  